<template>
  <div class="loginBox">
    <!-- 登录页面 -->
    <div v-if="this.changeNum==1" class="login">
      <div class="logintitle clear">
        <h3>登录</h3>
        <span>
          手机验证登录
          <i></i>
        </span>
      </div>
      <div class="inpbox phonebox">
        <input type="text" ref="loginPhone" placeholder="请输入手机号" name="phone" id="phone" maxlength="11" />
      </div>
      <div class="inpbox passbox">
        <input type="password" ref="loginPass" placeholder="请输入密码" name="pass" id="pass" maxlength="20" />
      </div>
      <!-- 验证码 -->
      <Code @getChecked="getCode"></Code>
      <div class="choosebox clear">
        <div class="autobox">
          <label for="auto">
            <input type="checkbox" name="auto" id="auto" />自动登录
          </label>
        </div>
        <span class="forget" @click="forgetBtn">忘记密码？</span>
      </div>
      <div class="loginbottom">
        <input type="button" class="bottomBrn loginBtn" value="登录" @click="login"/>
        <input type="button" class="bottomBrn goRegisterBtn" value="会员注册" @click="goRegister" />
      </div>
      <p class="prompt">提示：未注册用户将直接注册为礼拜五用户</p>
      <div class="xuxian">
        <p>用合作网站登录</p>
      </div>
      <div class="otherLogin">
        <div class="weixinLogin">
          <img src="../assets/img/weixinLogin.png" alt />
        </div>
        <div class="qqLogin">
          <img src="../assets/img/qqLogin.png" alt />
        </div>
      </div>
    </div>

    <!-- 注册页面 -->
    <div v-else-if="this.changeNum==2" class="login">
      <div class="inpbox phonebox">
        <input type="text"  ref="registerPhone" placeholder="请输入手机号" name="phone" id="phone" maxlength="11" />
      </div>
      <div class="inpbox passbox">
        <input type="password" ref="registerPass" placeholder="请输入密码(6-20位字符)" name="pass" id="pass" maxlength="20" />
      </div>
      <div class="inpbox repassbox">
        <input type="password" ref="registerRePass" placeholder="请再次输入密码确认" name="repass" id="repass" maxlength="20" />
      </div>
      <Code  @getChecked="getCode"></Code>
      <div class="inpbox phoneCodebox">
        <input type="text" placeholder="手机验证码" name="phoneCode" id="phoneCode" maxlength="6" />
        <input type="button" value="获取验证码" class="phoneBtn" />
      </div>
      
      <!-- 同意注册 -->
      <div class="agree">
        <label for>
          <input type="radio" v-model="isSurePro" @change="isSurePro=!isSurePro" />我已同意
          <span>《礼拜五用户协议》</span>
        </label>
      </div>
      <div class="loginbottom">
        <input type="button" class="bottomBrn registerBtn" value="注册" @click="register" :disabled="!isSurePro" />
        <input type="button" class="bottomBrn goLoginBtn" value="登录" @click="goLogin" />
      </div>
    </div>

    <!-- 找回密码页面 -->
    <div v-else-if="this.changeNum==3" class="login">
      <div class="logintitle clear">
        <h3>重置密码</h3>
      </div>
      <div class="inpbox phonebox">
        <input type="text" placeholder="请输入手机号" name="phone" id="phone" maxlength="11" />
      </div>
      <Code @getChecked="getCode"></Code>
      <div class="inpbox passbox" style="marginTop:10px;">
        <input type="password" placeholder="请输入密码(6-20位字符)" name="pass" id="pass" maxlength="20" />
      </div>
      <div class="inpbox repassbox">
        <input type="password"  placeholder="请再次输入密码确认" name="repass" id="repass" maxlength="20" />
      </div>
      
      <div class="inpbox phoneCodebox">
        <input type="text"  placeholder="手机验证码" name="phoneCode" id="phoneCode" maxlength="6" />
        <input type="button" value="获取验证码" class="phoneBtn" />
      </div>
      <div class="loginbottom">
        <input type="button" class="bottomBrn submitBtn" value="提交" @click="submitRepassword"/>
      </div>
    </div>
  </div>
</template>
<script>
import Code from "@/components/Code.vue";
export default {
  data(){
    return {
      changeNum :this.$store.state.changeNum,
      isSurePro:false,
      isCode:false,
    }
  },
  created(){

  },
  mounted(){
    this.isSurePro=false;
  },
  components:{
    Code,
  },
  methods:{
    goRegister(){
      this.$store.commit("goRegisterNum");
      this.changeNum = this.$store.state.changeNum;
      this.$emit('sendNum',this.changeNum);
      this.isSurePro=false;
    },
    goLogin(){
      this.$store.commit("goLoginNum");
      this.changeNum = this.$store.state.changeNum;
      this.$emit('sendNum',this.changeNum);
      this.isSurePro=false;
    },
    forgetBtn(){
      this.$store.commit("forgetNum");
      this.changeNum = this.$store.state.changeNum;
      this.$emit('sendNum',this.changeNum);
      this.isSurePro=false;
    },
    submitRepassword(){
      this.goLogin();
    },
    login(){
      var _this = this
      new Promise(function(resolve,reject){
          

          //  && _this.isCode == true
          if(_this.$refs.loginPhone.value != "" && _this.$refs.loginPass.value !=""){
            _this.$axios.post('http://localhost:3000/Denglu/login',{
              phone:_this.$refs.loginPhone.value,
              password:_this.$refs.loginPass.value,
            }).then(function (response) {
              window.console.log(response.data[1])
              window.console.log(response.data[0])
              window.console.log(response.data)
              if(response.data[0].code==0){
                alert("用户名或密码错误");
              }else{
                // id: 4
                // password: "000000"
                // phone: "22222222222"
                // username: null
                // sex: "nan"
                // borthyear: 2000
                // borthmonth: 1
                // borthday: 1
                // address: "北京"
                // imgsrc: "img/xiaorenren
                localStorage.userid = response.data[1].id;
                localStorage.userphone = response.data[1].phone;
                localStorage.useraddress = response.data[1].address;
                // localStorage.login = true;
              }
            })
            .catch(function (error) {
              window.console.log(error)
            })
          }
          resolve();
          reject();
      }).then(function(){
          // _this.$router.go(0);
      })
    },
    register(){
      // this.goLogin();
          var _this = this
          //  && _this.isCode == true
          if(_this.$refs.registerPass.value != _this.$refs.registerRePass.value){
            alert("两次密码不一致");
          }else if(_this.$refs.registerPass.value == "" || _this.$refs.registerRePass.value =="" || _this.$refs.registerPhone.value ==""){
            alert("请输入正确信息")
          }else if(_this.$refs.registerPass.value != "" && _this.$refs.registerRePass.value !="" && _this.$refs.registerPhone.value !=""){
            _this.$axios.post('http://localhost:3000/ZhuCe/ZhuCe',{
              phone:_this.$refs.registerPhone.value,
              password:_this.$refs.registerPass.value,
            }).then(function (response) {
              window.console.log(response.data)
              if(response.data.code==0){
                alert("该手机号已被注册");
              }else if(response.data.code==100){
                _this.goLogin();
              }
            })
            .catch(function (error) {
              window.console.log(error)
            })
          }
    },
    getCode(data){
      this.isCode = data;
      window.console.log(this.isCode);
    }
  },
  computed : {
  }
}
</script>
<style>
  /* 登录页面css样式 */
  .login{
    width: 388px;
    height: 500px;
    
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 39px;
    padding-top: 29px;
  }
  .logintitle{
    margin-bottom: 20px;
  }
  .logintitle h3{
    float: left;
    font-size: 22px;
    color: #666;
    font-weight: 600;
  }
  .logintitle span{
    float: right;
    font-size: 15px;
    margin-top:7px;
    color: #498e3d;
  }
  .phonebox,.passbox,.repassbox{
    margin-bottom: 29px;
  }
  .phoneCodebox{
    margin-top: 10px;
  }
  .autobox {
    float: left;
  }
  .choosebox{
    margin-bottom: 19px;
  }
  .choosebox span{
    float: right;
    color: #f4a767;
    text-decoration: underline;
    cursor: pointer;
  }
  .loginbottom{
    display: flex;
    justify-content:space-between;
    margin-bottom: 19px;
  }
  .bottomBrn{
    width: 132px;
    height: 44px;
    border-radius: 5px;
    border: none;
    color: #fff;
    font-size: 17px;
  }
  .loginbottom .loginBtn,.registerBtn,.submitBtn{
    background-color: #f08200;
  }
  .loginbottom .goRegisterBtn,.goLoginBtn{
    background-color: #498e3d;
  }
  .prompt{
    text-align: center;
    font-size: 14px;
    color: #999;
    margin-bottom: 20px;
  }
  .xuxian{
    height: 0;
    border-top: 1px dashed #999;
    position: relative;
    margin-bottom: 17px;
  }
  .xuxian p{
    position: absolute;
    width: 120px;
    height: 24px;
    top: 50%;
    left: 50%;
    margin-top: -12px;
    margin-left: -60px;
    background-color: #fff;
    text-align: center;
  }
  .otherLogin{
    width: 120px;
    margin: auto;
    display: flex;
    justify-content: space-around;
  }
  .otherLogin div{
    cursor: pointer;
  }

  /* 注册页面css样式 */

  .phoneCodebox{
    position: relative;
  }
  .phoneBtn{
    width: 100px;
    height: 32px;
    position: absolute;
    top:5px;
    right: 5px;
    border: none;
    color: #fff;
    background-color: #498e3d;
  }
  .agree{
    margin-top: 10px;
    margin-bottom: 19px;
  }
  .submitBtn{
    margin-top: 19px;
    width: 100%;
  }
</style>